<template>
  <div class="sys_setting_formdata_style">
    <div class="item">
      <p class="title">
        消息推送实例配置
      </p>
      <div class="table">
        <div class="table_items">
          <div class="w15">
            平台
          </div>
          <div class="w80">
            配置
          </div>
          <div
            @click="add('JE_PUSH_CONFIG')"
            class="w5"
          >
            +
          </div>
        </div>
        <div
          v-for="(item, index) in data.JE_PUSH_CONFIG"
          :key="index"
          class="table_items"
        >
          <div class="w15">
            <el-dropdown @command="handleCommand">
              <span
                @click="choose_item('JE_PUSH_CONFIG', index)"
                class="el-dropdown-link"
                style="cursor: pointer;"
              >
                {{ getCNName(item.code) }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(choose, i) in dictlist.JE_CORE_PUSH_PLATFORM"
                  :key="i"
                  :command="choose"
                >
                  {{ choose.text }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="w80">
            <input
              v-model="item.value"
              type="text"
            >
          </div>
          <div
            @click="del('JE_PUSH_CONFIG', index)"
            class="w5"
          >
            x
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <p class="title">
        默认消息推送方式
      </p>
      <div class="radio_wrp">
        <el-checkbox-group v-model="data.JE_PUSH_PLATFORM">
          <el-checkbox
            v-for="(item,index) in dictlist.JE_CORE_PUSH_PLATFORM"
            :label="item.code"
            :key="index"
          >
            {{ item.text }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="item">
      <p class="title">
        调试
      </p>
      <span
        @click="showDialog=true;dialogType='email'"
        class="sys_btns"
      >
        <i class="jeicon jeicon-mail-message" />
        邮箱
      </span>
      <span
        @click="showDialog=true;dialogType='msg'"
        class="sys_btns"
      >
        <i class="jeicon jeicon-message" />
        短信
      </span>
    <!-- <span class="sys_btns">
        <i class="jeicon jeicon-function"></i>
        代码
      </span> -->
    </div>
    <div class="item">
      <p class="title">
        短信发送方式
      </p>
      <div class="radio_wrp">
        <el-radio
          v-for="(item, index) in dictlist.JE_CORE_NOTETYPE"
          :key="index"
          v-model="data.JE_SYS_NOTEDIY"
          :label="item.code"
        >
          {{ item.text }}
        </el-radio>
      </div>
    </div>
    <div class="item">
      <p class="title">
        每天发送短信最大数
      </p>
      <el-input
        v-model="data.JE_SYS_NOTE_COUNT"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        网建短信服务用户名
      </p>
      <el-input
        v-model="data.JE_SYS_NOTE_USER"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        网建短信服务密码
      </p>
      <el-input
        v-model="data.JE_SYS_NOTE_PASSWORD"
        class="hasclick"
        clearable
      />
      <p class="holder">
        服务申请地址：http://www.smschinese.cn
      </p>
    </div>
    <div class="item">
      <p class="title">
        邮箱服务器
      </p>
      <el-input
        v-model="data.JE_SYS_EMAIL_SERVERHOST"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        启用SSL
      </p>
      <div class="radio_wrp">
        <el-radio
          v-for="(item, index) in dictlist.YESORNO"
          :key="index"
          v-model="data.JE_SYS_EMAIL_SSL"
          :label="item.code"
          @change="changeServerport"
        >
          {{ item.text }}
        </el-radio>
      </div>
    </div>
    <div class="item">
      <p class="title">
        邮箱服务器端口
      </p>
      <el-input
        v-model="data.JE_SYS_EMAIL_SERVERPORT"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        邮箱管理员帐号
      </p>
      <el-input
        v-model="data.JE_SYS_EMAIL_USERNAME"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        邮箱管理员密码
      </p>
      <el-input
        v-model="data.JE_SYS_EMAIL_PASSWORD"
        class="hasclick"
        clearable
      />
    </div>
    <div class="item">
      <p class="title">
        邮箱服务使用身份验证
      </p>
      <div class="radio_wrp">
        <el-checkbox v-model="data.JE_SYS_EMAIL_SERVERVALIDATE">
          使用
        </el-checkbox>
      </div>
    </div>
    <el-dialog
      :visible.sync="showDialog"
      :modal-append-to-body="false"
      :before-close="closeDialog"
      class="send_dialog"
      width="30%"
    >
      <h2>{{ dialogType === 'email' ? '邮件' : '短信' }}发送</h2>
      <div class="dialog_item">
        <p><span style="color: red;">*</span>{{ dialogType === 'email' ? '邮箱地址' : '手机号' }}</p>
        <el-input
          v-model="dialogForm.value"
          resize="none"
          clearable
          auto-complete="off"
        />
      </div>
      <div class="dialog_item">
        <p><span style="color: red;">*</span>内容</p>
        <el-input
          v-model="dialogForm.context"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          resize="none"
          clearable
          auto-complete="off"
        />
      </div>
      <div class="btn_group">
        <span
          @click="submit"
          class="save"
        >发 送</span>
        <span
          @click="closeDialog"
          class="close"
        >关 闭</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setTimeout } from 'timers';

export default {
  name: 'Xxfw',
  props: {
    formdata: {
      type: Object,
      default: () => {},
    },
    dictlist: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    const data = {
      JE_PUSH_PLATFORM: this.formdata.JE_PUSH_PLATFORM,
      JE_SYS_NOTEDIY: this.formdata.JE_SYS_NOTEDIY,
      JE_SYS_NOTE_COUNT: this.formdata.JE_SYS_NOTE_COUNT,
      JE_SYS_NOTE_USER: this.formdata.JE_SYS_NOTE_USER,
      JE_SYS_NOTE_PASSWORD: this.formdata.JE_SYS_NOTE_PASSWORD,
      JE_SYS_EMAIL_SERVERHOST: this.formdata.JE_SYS_EMAIL_SERVERHOST,
      JE_SYS_EMAIL_SERVERPORT: this.formdata.JE_SYS_EMAIL_SERVERPORT,
      JE_SYS_EMAIL_SSL: this.formdata.JE_SYS_EMAIL_SSL,
      JE_SYS_EMAIL_USERNAME: this.formdata.JE_SYS_EMAIL_USERNAME,
      JE_SYS_EMAIL_PASSWORD: this.formdata.JE_SYS_EMAIL_PASSWORD,
      JE_SYS_EMAIL_SERVERVALIDATE: this.formdata.JE_SYS_EMAIL_SERVERVALIDATE,
      JE_PUSH_CONFIG: this.formdata.JE_PUSH_CONFIG,
    };
    return {
      showDialog: false,
      dialogType: '',
      dialogForm: {},
      data,
      click_item: {},
    };
  },
  created() {
    const datas = JSON.parse(this.data.JE_PUSH_CONFIG);
    const listData = [];
    for (const key in datas) {
      listData.push({ code: key, text: key, value: datas[key] });
    }
    this.data.JE_PUSH_CONFIG = listData;
    this.formdata.JE_PUSH_CONFIG = listData;
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
      setTimeout(() => {
        this.dialogType = '';
        this.dialogForm = {};
      }, 500);
    },
    submit() {
      if (!this.dialogForm.value) {
        return JE.msg(`${this.dialogType === 'email' ? '邮箱地址' : '手机号'}不能为空`);
      }
      if (!this.dialogForm.context) {
        return JE.msg('内容不能为空');
      }
      this.dialogForm.type = this.dialogType === 'email' ? 'email' : 'note';
      const resObj = JE.ajax({ url: JE.getUrlMaps('je.core.message.message', 'sendMsg'), params: this.dialogForm });
      if (resObj.success) {
        JE.msg(resObj.obj);
        this.closeDialog();
      } else {
        JE.alert(resObj.obj);
      }
    },
    changeServerport() {
      if (this.data.JE_SYS_EMAIL_SSL == '1') {
        this.data.JE_SYS_EMAIL_SERVERPORT = '465';
      } else {
        this.data.JE_SYS_EMAIL_SERVERPORT = '25';
      }
    },
    handleCommand(item) {
      this.data.JE_PUSH_CONFIG[this.click_item.ind].code = item.code;
      this.data.JE_PUSH_CONFIG[this.click_item.ind].text = item.text;
    },
    getCNName(code) {
      if (!code) return;
      const result = this.dictlist.JE_CORE_PUSH_PLATFORM.filter(item => item.code === code);
      return result.length > 0 && result[0].text;
    },
    add(type) {
      const obj = {
        code: 'DWR',
        text: '',
        value: '',
      };
      this.formdata[type].push(obj);
    },
    choose_item(type, index) {
      this.click_item.code = type;
      this.click_item.ind = index;
    },
    del(type, i) {
      this.formdata[type].splice(i, 1);
    },
  },
};
</script>

<style lang="scss">
  .sys_setting_formdata_style {
    .send_dialog {
      .el-dialog__body {
        padding: 30px 20px !important;
      }
      .dialog_item {
        margin-top: 10px;
        > p {
          width: 20%;
          text-align: right;
          float: left;
          padding-right: 20px;
        }
        .el-input {
          width: 80%;
          float: left;
          .el-input__inner {
            height: 30px;
          }
        }
        .el-textarea {
          float: left;
          width: 80%;
        }
        &:after {
          content: '';
          display: table;
          clear: both;
        }
      }
      .btn_group {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        > span {
          padding: 6px 12px;
          border-radius: 4px;
          cursor: pointer;
          background: #f4f4f4;
          border: 1px solid #dddddd;
          color: #444444;
          font-size: 12px;
          &:hover {
            background-color: #e7e7e7;
            border-color: #adadad;
          }
        }
        .save {
          border: 1px solid #386bd0;
          color: #ffffff;
          background: #386bd0;
          &:hover {
            color: #ffffff;
            background-color: #1a4c9c;
            border-color: #1a4c9c;
          }
        }
        .close {
          margin-left: 20px;
        }
      }
    }
  }
</style>
